﻿import React, {Component} from 'react';
import {
    Form,
    FormRow,
    Input,
    Textarea,
    Button,
    CheckBox,
    CheckBoxGroup,
    RadioGroup,
    Select,
    Icon,
    ErrorMessage
} from '@/components'
import {required, email} from '@/components/Validation/Validator'
import {observer} from 'mobx-react'
import DatePicker from "@/components/DatePicker/DatePicker";
import {StoreManager} from "@/stores";


@observer
export default class Registration extends Component {

    Form1 = `Form1`

    componentDidMount() {
        const model = {
            Hehe: 'a',
            DDDD: 4,
            Sex: 1,
            LastName: 'abdsfsdf',
            email: 'a@1.com',
            Remark: 's.djfls的方式地方记录时代大发牢骚'
        }

        const Form1 = StoreManager.get(this.Form1)
        setTimeout(() => {
            Form1.setModel(model)
        }, 1000)
    }

    handleFetchSelect = (e) => {
        const options = []
        for (let index = 0; index < 20; index++) {
            options.push({label: 'Test' + index, value: index + 1})
        }
        const store = StoreManager.get('Sex')
        store.changeOptions(options)
    }
    handleClick = (event) => {
        const Form1 = StoreManager.get(this.Form1)
        alert(JSON.stringify(Form1.getModel()))

    }

    handleSubmit = (event, Form) => {
        event.preventDefault()
        event.stopPropagation()


    }
    handleForm2Submit = (event) => {

    }

    handleChange(option, index) {
        alert(option.value)
    }

    handleSelectFetch(keyword) {
        return new Promise(resolve=>{
            setTimeout(()=>{
                alert(1)
                resolve()
            },1000)
        })
    }

    render() {
        return (
            <div>

                <CheckBox name="bbb"
                          validations={[required]}
                          value={123}
                          disabled={false}
                          className="checkbox-danger"
                          label="收代理费科技时代"/>
                <Form name={this.Form1} onSubmit={this.handleSubmit}>
                    <FormRow>
                        <Button onClick={this.handleClick}>验证所有表单</Button>
                    </FormRow>
                    <FormRow label="测试测试测试测试测" htmlFor="Hehe">
                        <RadioGroup name="Hehe"
                                    validations={[required]}
                                    inline={false}
                                    options={
                                        [{label: '女', value: 'a'},
                                            {label: '男', value: 'b'},
                                            {label: '其他', value: 'c'},
                                            {value: 'd'}

                                        ]}>
                        </RadioGroup>
                    </FormRow>
                    <FormRow label="测试测试测试测试测" htmlFor="Hehe">
                        <CheckBoxGroup name="DDDD"
                                       inline={false}
                                       validations={[required]}
                                       options={[
                                           {label: 'aa', value: '1'},
                                           {label: 'bb', value: '2'},
                                           {label: 'dd', value: '3'},
                                           {label: 'ccc', value: '4'}
                                       ]}
                                       disabled={false}
                                       className="checkbox-danger"
                                       label="收代理费科技时代"/>
                    </FormRow>
                    <FormRow label="Lastname" htmlFor="Lastname" cols={12}>
                        <Input
                            placeholder="Lastname"
                            addonBefore={<Icon type="calendar"/>}
                            addonAfter={<b>absdfsdf</b>}
                            name="LastName"
                            validations={[required]}
                            maxLength="21"
                            mutilLine={true}
                            showErrors={false}
                        />
                        <ErrorMessage name="LastName"/>
                    </FormRow>
                    <FormRow label="Email" cols={8}>
                        <Input
                            addonBefore={<Icon type="fpstar"/>}
                            placeholder="Email"
                            name="email"
                            validations={[required, email]}        />
                    </FormRow>
                    <FormRow label="备注" cols={8}>
                        <Textarea
                            placeholder="Remark"
                            disabled={false}
                            name="Remark"
                            validations={[required]}
                        />
                    </FormRow>
                    <FormRow label="下拉框" cols={8}>
                        <Select
                            name="Sex"
                            placeholder="请选择"
                            showSearch={false}
                            onChange={this.handleChange.bind(this)}
                            onFetch={this.handleSelectFetch.bind(this)}
                            render={option => <b>{option.highlightLabel || option.label}</b>}
                            validations={[required]}
                        />
                        <Button onClick={this.handleFetchSelect}>切换数据</Button>
                    </FormRow>
                    <FormRow label="日期" cols={8}>
                        <DatePicker name="Date1"/>

                    </FormRow>
                    <FormRow>
                        <Button className="button">提交数据123</Button>
                    </FormRow>
                </Form>
                <div style={{height: "1000px"}}></div>
            </div>

        )
    }
}
